<template>
    <div id="top-header">
        <el-icon :size="30" @click="toHome" class="home" title="返回首页">
            <House />
        </el-icon>
        <el-icon :size="30" class="fullscreen" @click="toggleFullScreen" :title="isFullScreen">
            <FullScreen />
        </el-icon>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, onUnmounted } from 'vue'

const toHome = () => {
    location.href = '/'
}

const isFullScreen = ref('全屏')

function toggleFullScreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
        isFullScreen.value = '全屏'
    } else {
        document.exitFullscreen()
        isFullScreen.value = '退出全屏'
    }
}

const handleFullScreenChange = () => {
    isFullScreen.value = !document.fullscreenElement ? '全屏' : '退出全屏'
}

onBeforeMount(() => {
    document.addEventListener('fullscreenchange', handleFullScreenChange)
    document.addEventListener('webkitfullscreenchange', handleFullScreenChange)
})

onUnmounted(() => {
    document.removeEventListener('fullscreenchange', handleFullScreenChange)
    document.removeEventListener('webkitfullscreenchange', handleFullScreenChange)
})
</script>

<style lang="less" scoped>
#top-header {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;

    .home {
        position: absolute;
        top: 8px;
        right: 80px;
        z-index: 100;
        color: #fff;
        cursor: pointer;
    }

    .fullscreen {
        position: absolute;
        top: 8px;
        right: 30px;
        z-index: 100;
        color: #fff;
        cursor: pointer;
    }

    .areaselect {
        position: absolute;
        bottom: 5px;
        right: 380px;
        z-index: 100;
    }

    .placeselect {
        position: absolute;
        bottom: 5px;
        right: 225px;
        z-index: 100;
    }
}
</style>
